<template>
  <div class="pc-register">
    <div class="pc-register-box">
      <box-header></box-header>
      <div class="pc-register-content">
        <div class="pc-register-input">
          <div class="phoneNumber-wrapper">
            <mt-field :state="state.phone" placeholder="请输入您的手机号" type="phone" v-model="phoneNumber"></mt-field>
            <p class="tips" v-show="state.phone === 'error'">请确认您的手机号码格式</p>
          </div>
          <div class="captcha-wrapper">
            <mt-field placeholder="请输入验证码" v-model="captcha"></mt-field>
            <span class="captcha-btn" @click="countDown"
                  :class="{'captcha-active':start || state.phone === 'error' || !phoneNumber}">
              <count-down :start=start></count-down>
            </span>
            <p class="tips" v-show="state.captcha === 'error'">验证码不能为空</p>
          </div>
          <div class="password-wrapper">
            <mt-field :state="state.password" placeholder="请输入您的密码" type="password" v-model="password"></mt-field>
            <p class="tips" v-show="state.password === 'error'">密码为6-20位数的数字和字母组合</p>
          </div>
          <a href="javascript:;" class="btn-submit-pc" @click="userRegister"
             :class="{'btn-readonly-pc': state.password !== 'success' || state.phone !== 'success' || state.captcha!== 'success' || !acceptRule}">
            立即注册</a>
        </div>
        <div class="pc-register-input-detail">
          <a href="javascript:;" class="box" @click="accept">
            <img width="100%" height="100%" src="../../assets/img/pc-get.png" v-if="acceptRule"/>
          </a>
          <span class="accept">我已阅读并接受<a href="javascript:;" class="user-protocol" @click="showUserArgument">《用户协议》</a></span>
        </div>
        <div class="out-login">
          <span class="line"></span>
          <span class="out-login-text">第三方登录</span>
          <span class="line"></span>
        </div>
        <div class="weChat">
          <a href="javascript:;" class="box" @click="weChat">
            <img width="100%" height="100%" src="../../assets/img/pc-wechat.png">
          </a>
        </div>
      </div>
    </div>
    <div class="user-argument-wrapper" v-if="userArgument">
      <user-argument></user-argument>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BoxHeader from '../../components/common/pc-box-header/box-header'
  import countDown from '../../components/common/countDown/countDown'
  import userArgument from '../../components/common/user-argument/user-argument'

  export default {
    data() {
      return {
        start: false,
        acceptRule: false,
        userArgument: false,
        state: {
          phone: '',
          password: '',
          captcha: ''
        },
        phoneNumber: '',
        captcha: '',
        password: ''
      }
    },
    watch: {
      phoneNumber(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.phone = 'error'
        } else {
          this.state.phone = 'success'
        }
      },
      password(value) {
        let reg = /^[A-Za-z0-9]{6,20}$/
        if (!reg.test(value)) {
          this.state.password = 'error'
        } else {
          this.state.password = 'success'
        }
      },
      captcha(value) {
        if (value) {
          this.state.captcha = 'success'
        } else {
          this.state.captcha = 'error'
        }
      }
    },
    methods: {
      countDown() {
        if (this.state.phone === 'success') {
          this.start = true
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=sendSms', {
            params: {
              phone: this.phoneNumber,
              type: 0
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '发送成功',
                duration: 1000
              })
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000
              })
            }
          })
        }
      },
      userRegister() {
        if (this.state.password === 'success' && this.state.phone === 'success' && this.state.captcha === 'success' && this.acceptRule) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=register', {
            params: {
              phone: this.phoneNumber,
              code: this.captcha,
              password: this.password
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '注册成功，即将为您自动登录...',
                duration: 2000
              })
              setTimeout(() => {
                this.eventBus.$emit('pcLogin', true)
              }, 2000)
            } else {
              this.Toast({
                message: response.data.info,
                duration: 1000
              })
            }
          })
        }
      },
      accept() {
        this.acceptRule = !this.acceptRule
      },
      weChat() {
        this.eventBus.$emit('pcLogin', true)
      },
      showUserArgument() {
        this.userArgument = true
      }
    },
    mounted() {
      this.eventBus.$on('countDown', (stat) => {
        this.start = stat
      })
      this.eventBus.$on('closeUserArgument', (stat) => {
        this.userArgument = stat
      })
    },
    components: {
      BoxHeader,
      countDown,
      userArgument
    }
  }
</script>

<style type="text/css">
  .pc-register {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    z-index: 100;
  }

  .pc-register .user-argument-wrapper {
    position: absolute;
    padding: 0 40px 40px 40px;
    width: 1280px;
    height: 100%;
    background: #fff;
    z-index: 999;
    overflow: auto;
  }

  .pc-register .user-argument-wrapper .user-argument .user-argument-header {
    font-size: 32px;
    margin-top: 30px;
    color: #000;
    text-align: center;
    font-weight: bold;
  }

  .pc-register .user-argument-wrapper .user-argument .user-argument-header-detail {
    margin: 28px 0 23px 0;
    font-size: 14px;
    color: #000;
    font-weight: bold;
    text-align: center;
  }

  .pc-register .user-argument-wrapper .user-argument .user-argument-content-bold {
    margin-top: 28px;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    font-weight: bold;
  }

  .pc-register .user-argument-wrapper .user-argument .user-argument-content {
    font-size: 14px;
    line-height: 20px;
    color: #000;
  }

  .pc-register .pc-register-box {
    width: 643px;
    min-height: 533px;
    background: #fff;
    border-radius: 10px;
  }

  .pc-register .pc-register-box .pc-register-content {
    padding: 30px 158px 0 158px;
  }

  .pc-register .pc-register-box .pc-register-input-detail {
    position: relative;
    display: inline-flex;
    margin-top: 24px;
    width: 100%;
  }

  .pc-register .pc-register-box .pc-register-input-detail span {
    display: block;
    font-size: 22px;
    white-space: nowrap;
    color: #666;
  }

  .pc-register .pc-register-box .pc-register-input-detail .box {
    margin-right: 9px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 1px;
  }

  .pc-register .pc-register-box .out-login {
    display: inline-flex;
    margin-top: 23px;
    width: 100%;
  }

  .pc-register .pc-register-box .out-login span {
    display: block;
  }

  .pc-register .pc-register-box .out-login .line {
    flex: 1;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .2);
  }

  .pc-register .pc-register-box .out-login .out-login-text {
    flex: 1;
    text-align: center;
    font-size: 16px;
    color: #666;
  }

  .pc-register .pc-register-box .weChat {
    margin: 23px auto 0 auto;
    padding-bottom: 40px;
    width: 38px;
    height: 32px;
  }

  .pc-register .pc-register-box .pc-register-input .phoneNumber-wrapper {
    position: relative;
  }

  .pc-register .pc-register-box .pc-register-input .captcha-wrapper, .pc-register .pc-register-box .pc-register-input .phoneNumber-wrapper,
  .pc-register .pc-register-box .pc-register-input .password-wrapper {
    position: relative;
  }

  .pc-register .pc-register-box .pc-register-input .captcha-wrapper .captcha-btn {
    position: absolute;
    display: block;
    padding: 0 5px;
    min-width: 123px;
    height: 40px;
    top: 4px;
    right: 4px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    background: #2ECC40;
    z-index: 99;
    border-radius: 5px;
  }

  .pc-register .pc-register-box .pc-register-input .captcha-wrapper .captcha-active {
    background: #ccc;
  }
</style>
